<template>
  <div>
    <!--  顶部面包屑  -->
    <div class="ccui-navigation">
      <el-button
        size="mini"
        type="primary-icon-medium"
        icon="icon-ccui-return"
        @click="handleBack"
        >返回
      </el-button>
      <div class="ccui-navigation-divider" />
      <!-- 面包屑 -->
      <el-breadcrumb
        class="ccui-navigation-crumbs-container"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          :to="{ path: $store.getters.getBreadcrumb('level1').path }"
          >{{ $store.getters.getBreadcrumb("level1").name }}
        </el-breadcrumb-item>
        <el-breadcrumb-item
          :to="{ path: '/paymentManagement/application/applicationAll' }"
          >付款管理
        </el-breadcrumb-item>
        <el-breadcrumb-item
          :to="{ path: '/paymentManagement/application/applicationAll' }"
          >付款管理
        </el-breadcrumb-item>
        <el-breadcrumb-item
          :to="{
            path: '/paymentManagement/applicationChange/applicationChangeAll'
          }"
          >付款登记
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="ccui-curr-crumb"
            >{{ pageSatus[editStatus] }} {{ paymentNames }}</span
          >
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 非审批退回展示左侧主页面 -->
    <div class="ccui-app-container-detail" v-if="!approvalStatusLook">
      <div class="ccui-app-container-detail-body">
        <el-tabs v-model="activeName" class="el-tabs__customize">
          <!-- 基本信息 -->
          <el-tab-pane label="基本信息" name="a">
            <!-- 登记单新增、编辑展示 -->
            <PaymentChangeBasicInfo
              v-if="editStatus === 'add' || editStatus === 'edit'"
              class="commonClass"
              ref="basicInfo"
              @postPconcId="getPconcId"
              @clearTable="clearTable"
              :formData="formData"
              :isDisabled="isDisabled"
              @clear-table="clearTableData"
              @formCopyDataFun="formCopyDataFun"
            />

            <!-- 查看详情 -->
            <PaymentRegistrationLookDetail :formData="formData" v-else />
          </el-tab-pane>

          <!-- 附件 -->
          <el-tab-pane label="附件" name="b">
            <Attachment
              :isDisabled="isDisabled"
              :tableDataList="tableDataList"
              @attachmentSucessData="attachmentSucessData"
              ref="attachment"
              class="commonClass"
            ></Attachment>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 审批退回展示界面 -->
    <ApprovalReturnChangeDetails
      :id="approveId"
      v-if="approvalStatusLook && isTrue"
    >
      <!--  审批状态图  -->
      <div class="detail-info-el-Label">
        <el-label :type="labelType[approvalStatus]"></el-label>
      </div>

      <el-tabs v-model="activeName" class="el-tabs__customize">
        <!-- 基本信息 -->
        <el-tab-pane label="基本信息" name="a">
          <!-- 查看详情 -->
          <PaymentRegistrationLookDetail :formData="formData" />
        </el-tab-pane>

        <!-- 附件 -->
        <el-tab-pane label="附件" name="b">
          <Attachment
            :isDisabled="isDisabled"
            :tableDataList="tableDataList"
            @attachmentSucessData="attachmentSucessData"
            ref="attachment"
            class="commonClass"
          ></Attachment>
        </el-tab-pane>
      </el-tabs>
    </ApprovalReturnChangeDetails>
    <!--    付款登记-->
    <bottomGuide
      busiType=""
      v-if="approvalStatusLook && approvalStatus == 4"
      approvalStatus="approvaled"
      exportMethod="get"
      methodGetPageType="exportPaymentDetail"
      :curPageId="JSON.parse(this.$route.params.id).id"
      :businessCode="businessCode"
      @handleBack="handleBack"
    />

    <!--  底部操作按钮  -->
    <el-bottom-guide v-else>
      <ul class="ccui-bottom-button">
        <li v-show="!isDisabled">
          <el-button
            type="bottom"
            icon="icon-ccui-save"
            @click="submitHandleKeep"
            >暂存
          </el-button>
        </li>
        <li v-show="!isDisabled">
          <el-button
            type="bottom"
            icon="icon-ccui-save"
            @click="submitSaveCheck"
            >保存并校验
          </el-button>
        </li>
        <li v-show="!isDisabled">
          <el-button type="bottom" icon="icon-ccui-save" @click="submitHandle"
            >保存并提交
          </el-button>
        </li>
        <div v-show="!isDisabled" class="ccui-bottom-guide-divider" />
        <li>
          <el-button type="bottom" icon="icon-ccui-return" @click="handleBack"
            >返回
          </el-button>
        </li>
      </ul>
    </el-bottom-guide>
  </div>
</template>

<script>
import PaymentChangeBasicInfo from "./components/paymentChangeBasicInfo";
import Attachment from "@/app/paymentManagement/components/attachment";
import PaymentRegistrationLookDetail from "./components/paymentRegistrationLookDetail";

import ApprovalReturnChangeDetails from "./components/approvalReturnChangeDetails.vue";
import paymentDetail from "@/app/paymentManagement/mixins/paymentDetail";
// import { mixinCommon } from "@/app/paymentManagement/mixins/mixin-common";
import {
  insertPaymentRegister,
  updatePaymentRegister,
  qryPaymentRegisterById
} from "@/app/paymentManagement/paymentApplicationChange/apis";
import publicComponent from "@/basa/components/public";

export default {
  name: "applicationChangeDetail",
  mixins: [paymentDetail],
  components: {
    PaymentChangeBasicInfo,
    Attachment,
    PaymentRegistrationLookDetail,
    ApprovalReturnChangeDetails,
    bottomGuide: publicComponent.bottomGuide
  },
  data() {
    return {
      businessCode: "",
      approveId: "",
      // 可读可写控制
      isDisabled: false,
      // 编辑状态
      editStatus: "add",
      activeName: "a",
      // 缓存
      submitFlag: false,
      concId: null,
      clearTableList: null,
      // 表单字段
      formData: {},
      // 登记编辑暂存 保存并校验 保存并提交入参
      formDataEdit: {
        optId: "",
        id: "",
        paymentCode: "",
        registerCode: "",
        paymentName: "",
        registerPrice: "",
        registerTime: "",
        paymentType: "",
        paymentMode: "",
        billMonths: "",
        reportOpenid: "",
        reportUsername: "",
        reportTime: "",
        fileList: [],
        paymentTime: ""
        // paymentMoney: "",
      },
      isTrue: false
    };
  },

  methods: {
    // 校验
    formVerification(type, optId) {
      let refsDom = this.$refs["basicInfo"].$refs["basicInfo"];
      // 附件去重

      this.formCopyData.fileList = Array.from(new Set(this.attachmentUploadId));

      // 暂存不走校验 保存 提交的走校验
      if (optId !== 1) {
        refsDom.validate(valid => {
          if (valid) {
            if (type === "edit") this.updatePaymentRegister(optId);
            else this.insertPaymentRegister(optId);
          } else {
            this.$showErrorMessage("付款登记单基本信息不完整，请编辑后保存");
          }
        });
      } else {
        if (type === "edit") this.updatePaymentRegister(optId);
        else this.insertPaymentRegister(optId);
      }
    },
    formDataEditFilter() {
      // 登记单参数过滤
      for (const keys in this.formDataEdit) {
        this.formDataEdit[keys] = this.formCopyData[keys];
      }
      // 时间格式过滤
      this.dateFormatFun(this.formDataEdit);
    },
    // 登记单编辑页-暂存、保存并校验、保存并提交
    async updatePaymentRegister(optId) {
      // 不能是0
      const isZero = ["0", "0.0", "0.00", "0."];
      if (isZero.includes(this.formCopyData.registerPrice)) {
        this.$showErrorMessage("付款登记单基本信息不完整，请编辑后保存");
        return;
      }

      // 提交标识
      this.formCopyData.optId = optId;
      // 过滤入参
      await this.formDataEditFilter();

      // 请求接口
      updatePaymentRegister({
        ...this.formDataEdit,
        isShowPageLoading: true
      }).then(res => {
        // 成功提示框
        this.tipsMessage(optId, res);

        // 返回上一页
        this.$router.go(-1);
      });
    },

    // 登记单新增页-暂存、保存并校验、保存并提交
    async insertPaymentRegister(optId) {
      // 不能是0
      const isZero = ["0", "0.0", "0.00", "0."];
      if (isZero.includes(this.formCopyData.registerPrice)) {
        this.$showErrorMessage("付款登记单基本信息不完整，请编辑后保存");
        return;
      }
      // 提交标识
      this.formCopyData.optId = optId;
      // 过滤入参
      await this.formDataEditFilter();
      console.log(this.formCopyData, "过滤入参");
      // 请求接口
      insertPaymentRegister({
        ...this.formDataEdit,
        isShowPageLoading: true
      }).then(res => {
        // 成功提示框
        this.tipsMessage(optId, res);
        // 返回上一页
        this.$router.go(-1);
      });
    },
    // 提示框
    tipsMessage(optId, res) {
      let message = "";
      if (optId === 1) message = `暂存成功`;
      if (optId === 2) message = `保存并校验成功`;
      if (optId === 3) message = `保存并提交成功`;

      // 提示
      this.$message({
        message,
        type: res.data.code === "0" ? "success" : "error",
        showClose: true,
        ccuiCustom: true
      });
    },

    // 登记单编辑详情编辑查询
    getLookDetailData(id) {
      qryPaymentRegisterById({ id }).then(res => {
        this.formData = res.data.data;
        this.businessCode = res.data.data.paymentCode;
        this.formData.initTotalContractPriceIncludeTax =
          Number(res.data.data.initTotalContractPriceIncludeTax).toFixed(2) ||
          "0.00";
        this.formData.settledPrice =
          Number(res.data.data.settledPrice).toFixed(2) || "0.00";
        this.formData.invoiceIncludeTax =
          Number(res.data.data.invoiceIncludeTax).toFixed(2) || "0.00";
        this.formData.paymentMoney =
          Number(res.data.data.paymentMoney).toFixed(2) || "0.00";
        // 处理时间格式
        this.dateFormatFun(this.formData);
        this.tableDataList = res.data.data.fileList || [];

        // 审批记录状态
        this.approvalStatus = res.data.data.approvalStatus;

        // 清单名称展示
        this.paymentNames = res.data.data.paymentName;
        this.isTrue = true;
      });
    },
    handleBack() {
      this.$router.go(-1);
      //  this.$router.push(`/paymentManagement/application/applicationAll`);
    }
  },
  beforeRouteLeave(to, from, next) {
    this.isTrue = false;
    next();
  }
};
</script>

<style scoped lang="scss">
.commonClass {
  margin-top: 5px;
}

/deep/ .el-group-title .group-content {
  margin-top: 40px;
}
/deep/ .el-group-title.ccui-group-wrapper .extend-btn {
  position: absolute;
  top: 0px;
  right: 0;
}
</style>
